<template>
  <view>
    <view class="custom-nav-bar">
      <image src="/static/tool/top/_20240323222417.png" class="nav-bar-bg1" mode="aspectFill"></image>
        <image src="/static/tool/top/_20240323222429.png" mode="" class="nav-bar-bg2"></image>
      <text class="nav-title">工具箱</text>
      <my-search></my-search>
    </view>
    
    <view class="cat-camera-box" @click="gotoCatCamera()">
      <view class="cat-camera-top">
        <text>萌猫相机</text>
        <view class="cat-pic">
          <image src="/static/tool/catCamera/20240419144446.png" mode="" class="cat-pic-1"></image>
         
        </view>
      </view>
      <view class="cat-camera-nav">
        <text>快来一起解锁你的猫咪新形象</text>
        <image src="/static/tool/catCamera/right1_right-one.png" mode=""></image>
      </view>
    </view>
    
    <view class="cat-me-box">
      <view class="cat-me-left" @click="gotoMyHistory()">
        <view class="cat-me-left-top">
          <text>历史记录</text>
          <view class="cat-me-left-pic">
            <image src="/static/tool/history/history_history (1).png" mode="" class="me-pic-1"></image>
            <image src="/static/tool/history/path7.png" mode="" class="me-pic-2"></image>
          </view>
        </view>
        <view class="cat-me-left-title">
          <text>查看你的成长记录</text>
        </view>
      </view>
      
      <view class="cat-me-right" @click="gotoMyCollect()">
        <view class="cat-me-right-top">
          <text>我的收藏</text>
          <view class="cat-me-right-pic">
            <image src="/static/tool/collect/like_like (1).png" mode="" class="me-pic-3"></image>
            <image src="/static/tool/collect/path8.png" mode="" class="me-pic-4"></image>
          </view>
        </view>
        <view class="cat-me-right-title">
          <text>查看你的收藏记录</text>
        </view>
      </view>
    </view>
  
    <view class="cat-health-box">
      <view class="cat-health-title">
        <image src="/static/tool/rectangle15.png" mode=""></image>
        <text>健康守护</text>
      </view>
      
      <view class="cat-health-function">
        <view class="cat-health-left" @click="gotoCatDoctor()">
          <view class="cat-health-left-top">
            <text>强烈推荐</text>
          </view>
          <view class="cat-health-left-title">
            <text class="cat-health-left-title-1">猫咪医师</text>
              <text class="cat-health-left-title-2">随时查询猫咪情况AI猫咪医师为你分析</text>
          </view>
          <image src="/static/tool/catDoctor/stethoscope_stethoscope.png" mode="" class="cat-health-left-pic1"></image>
          <view class="cat-health-left-pic2">
          </view>
        </view>
        <view class="cat-health-right">
          <view class="cat-health-eat">
            <view class="cat-eat-left">
              <text class="cat-eat-left-text1">能不能吃</text>
              <text class="cat-eat-left-text2">了解猫咪吃食</text>
            </view>
            <view class="cat-eat-right">
              <image src="/static/tool/eatAndDo/right1_right-one.png" mode="" class="cat-eat-right-pic1"></image>
              <image src="/static/tool/eatAndDo/path13.png" mode="" class="cat-eat-right-pic2"></image>
            </view>
          </view>
          <view class="cat-health-do">
            <view class="cat-do-left">
              <text class="cat-do-left-text1">能不能干</text>
              <text class="cat-do-left-text2">了解如何对待猫咪</text>
            </view>
            <view class="cat-do-right">
              <image src="/static/tool/eatAndDo/right1_right-one.png" mode="" class="cat-do-right-pic1"></image>
              <image src="/static/tool/eatAndDo/path13.png" mode="" class="cat-do-right-pic2"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  
  <view class="cat-fun-box">
    <view class="cat-fun-title">
      <image src="/static/tool/rectangle15.png" mode=""></image>
      <text>趣味功能</text>
    </view>
    
    <view class="cat-fun-mirror" @click="gotoMagic()">
      <view class="cat-mirror-left">
        <text class="cat-mirror-left-text1">喵之魔镜</text>
        <text class="cat-mirror-left-text2">一键召唤猫之本体</text>
      </view>
      <view class="cat-mirror-right">
        <view class="cat-mirror-right-top">
          <text>强烈推荐</text>
        </view>
        <image src="/static/tool/mirror2_mirror-two.png" mode="" class="cat-mirror-right-pic1"></image>
      </view>
    </view>
    
  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    },
    methods:{
      gotoMyCollect(){
        uni.navigateTo({
          url: '/subpkg/my-collect/my-collect'
        })
      },
      gotoMyHistory(){
        uni.navigateTo({
          url: '/subpkg/my-history/my-history'
        })
      },
      gotoCatCamera(){
        uni.navigateTo({
          url:'/subpkg/cat-camera/cat-camera'
        })
      },
      gotoMagic(){
        uni.navigateTo({
          url:'/subpkg/cat-magic/cat-magic'
        })
      },
      gotoCatDoctor(){
        uni.navigateTo({
          url: '/subpkg/cat-doctor/cat-doctor'
        })
      }
    }
  }
</script>

<style lang="scss">
.custom-nav-bar {  
  position: relative;   
 height: 540rpx; 
 
    
  .nav-bar-bg1 {
    position: absolute;
    top: 0;
    left: 0;  
    right: 0;  
    width: 100%;  
    height: 100%;  
    z-index: -1;
  }  
  .nav-bar-bg2{
    position: absolute;
    top: -35;
    left: -3;
    width: 308rpx;
    height: 300rpx;
  }
  .nav-title {  
    position: absolute;
    font-size: 25px;
    font-weight: bold;  
    color: #666666;  
    top: 100rpx;
    left: 50rpx;
    z-index: 999;
  }
}  

.cat-camera-box{
  
  background-repeat: no-repeat;
  width: 748rpx;
  height: 318rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  margin-left: 8rpx;
  margin-top: -135rpx;
  padding-left:36rpx;
  .cat-camera-top{
    position: relative;
    
    text{
     
      font-size: 35px;
      font-weight: bold;
      color: #FFFFFC;
      z-index: 999;
      padding-left: 40rpx;

  } 
  .cat-pic{
    position: absolute;
    top: -32rpx;
    left: 130rpx;
    .cat-pic-1{ 
      position: absolute;
      top: -175rpx;
      left: -127rpx;
      width: 838rpx;
      height: 470rpx;
      z-index: -1;
    } 
    .cat-pic-2{
      position: absolute;
      top: -222rpx;
      left: 0rpx;
      width: 700rpx;
      height: 460rpx;
    }
  }
  }
  .cat-camera-nav{
    display: flex;
    justify-content: center;
    align-items: center;
    text{
      font-size: 16px;
      font-weight: regular;
      color: #FFFFFF;
      padding-left: 40rpx;

    }
    image{
      margin-top: 6rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.cat-me-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx 36rpx;
  .cat-me-left{
    width: 352rpx;
    height: 150rpx;
    background-image: url('~@/static/tool/history/rectangle3.png');
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding-left: 34rpx;
    .cat-me-left-top{
      text{
        font-size: 18px;
        font-weight: bold;
        color: #B3834A;
      }
      .cat-me-left-pic{
        position: relative;
        .me-pic-1{
          position: absolute;
          width: 64rpx;
          height: 64rpx;
          left: 178rpx;
          bottom: -18rpx;
        }
        .me-pic-2{
          position: absolute;
          left: 215rpx;
          width: 88rpx;
          height: 68rpx;
        }
      }
    }
    .cat-me-left-title{
      font-size: 10px;
      font-weight: regular;
      color: #B3834A;
    }
  }
  .cat-me-right{
    width: 352rpx;
    height: 150rpx;
    background-image: url('~@/static/tool/collect/rectangle13.png');
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    
    padding-left: 40rpx;
    .cat-me-right-top{
      text{
        font-size: 18px;
        font-weight: bold;
        color: #B3834A;
      }
      .cat-me-right-pic{
        position: relative;
        .me-pic-3{
          position: absolute;
          width: 64rpx;
          height: 64rpx;
          left: 178rpx;
          bottom: -18rpx;
        }
        .me-pic-4{
          position: absolute;
          left: 207rpx;
          width: 88rpx;
          height: 68rpx;
        }
      }
    }
    .cat-me-right-title{
      font-size: 10px;
      font-weight: regular;
      color: #B3834A;
    }
  }
}

.cat-health-box{
  margin-left: 48rpx;
  .cat-health-title{
    display: flex;
    align-items: center;
    justify-content: start;
    image{
      width: 12rpx;
      height: 48rpx;
    }
    text{
      font-size: 16px;
      font-weight: bold;
      color: #6E6E6E;
      margin-left: 10rpx;
    }
  }
  .cat-health-function{
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: -26rpx;
    .cat-health-left{
      width: 352rpx;
      height: 314rpx;
      background-image: url('~@/static/tool/catDoctor/rectangle19.png');
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      .cat-health-left-top{
        width: 134rpx;
        height: 46rpx;
        background-image: url('~@/static/tool/catDoctor/cross2.png');
        background-repeat: no-repeat;
        margin-top: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        text{
          font-size: 10px;
          font-weight: bold;
          color: #FFFFF7;
        }
      }
      .cat-health-left-title{
        display: flex;
        flex-direction: column;
        justify-content: center;
        // align-items: flex-start;
        margin-right: 100rpx;
        .cat-health-left-title-1{
          font-size: 19px;
          font-weight: bold;
          color: #555555;
          padding-bottom: 20rpx;
        }
        .cat-health-left-title-2{
          width: 198rpx;
          height: 60rpx;
          font-size: 10px;
          font-weight: regular;
          color: #AEAEAE;
        }
      }
      .cat-health-left-pic1{
        width: 64rpx;
        height: 64rpx;
        padding-right: 40rpx;
      }
      .cat-health-left-pic2{
        width: 334rpx;
        height: 100rpx;
        background-image: url('~@/static/tool/catDoctor/path12.png');
        background-repeat: no-repeat;
        
      }
    }
    .cat-health-right{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      margin-right: 18rpx;
      .cat-health-eat{
        width: 352rpx;
        height: 138rpx;
        background-image: url('~@/static/tool/eatAndDo/rectangle22.png');
        background-repeat: no-repeat;
        margin-bottom: 30rpx;
        display: flex;
        justify-content: space-between;
        .cat-eat-left{
          display: flex;
          flex-direction: column;
          padding-left: 40rpx;
          padding-top: 45rpx;
          .cat-eat-left-text1{
            font-size: 16px;
            font-weight: bold;
            color: #555555;
          }
          .cat-eat-left-text2{
            font-size: 9px;
            color: #AEAEAE;
          }
        }
        .cat-eat-right{
          display: flex;
          flex-direction: column;
          padding-top: 50rpx;
          padding-right: 26rpx;
          .cat-eat-right-pic1{
            width: 46rpx;
            height: 48rpx;
            
          }
          .cat-eat-right-pic2{
            width: 66rpx;
            height: 46rpx;
          }
        }
      }
      .cat-health-do{
        width: 352rpx;
        height: 138rpx;
        background-image: url('~@/static/tool/eatAndDo/rectangle22.png');
        background-repeat: no-repeat;
        display: flex;
        justify-content: space-between;
        .cat-do-left{
          display: flex;
          flex-direction: column;
          padding-left: 40rpx;
          padding-top: 45rpx;
          .cat-do-left-text1{
            font-size: 16px;
            font-weight: bold;
            color: #555555;
          }
          .cat-do-left-text2{
            font-size: 9px;
            color: #AEAEAE;
          }
        }
        .cat-do-right{
          display: flex;
          flex-direction: column;
          padding-top: 50rpx;
          padding-right: 26rpx;
          .cat-do-right-pic1{
            width: 46rpx;
            height: 48rpx;
           
          }
          .cat-do-right-pic2{
            width: 66rpx;
            height: 46rpx;
          }
        }
      }
    }
  }
}

.cat-fun-box{
  margin-left: 48rpx;
  margin-top: 30rpx;
  .cat-fun-title{
    display: flex;
    align-items: center;
    justify-content: start;
    image{
      width: 12rpx;
      height: 48rpx;
    }
    text{
      font-size: 16px;
      font-weight: bold;
      color: #6E6E6E;
      margin-left: 10rpx;
    }
  }
  .cat-fun-mirror{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('~@/static/tool/rectangle3.png');
    background-repeat: no-repeat;
    width: 352rpx;
    height: 150rpx;
    margin-top: 20rpx;
    .cat-mirror-left{
      display: flex;
      flex-direction: column;
      padding-left: 30rpx;
      .cat-mirror-left-text1{
        font-size: 18px;
        font-weight: bold;
        color: #555555;
        margin-bottom: 6rpx;
      }
      .cat-mirror-left-text2{
        font-size: 10px;
        color: #AEAEAE;
      }
    }
    .cat-mirror-right{
      display: flex;
      flex-direction: column;
      justify-content: start;
      .cat-mirror-right-top{
        width: 134rpx;
        height: 46rpx;
        background-image: url('~@/static/tool/catDoctor/cross2.png');
        background-repeat: no-repeat;
        margin-top: -30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        text{
          font-size: 10px;
          font-weight: bold;
          color: #FFFFF7;
        }
      }
      .cat-mirror-right-pic1{
        width: 64rpx;
        height: 64rpx;
        margin-top: 10rpx;
        margin-left: 32rpx;
      }
    }
  }
}
</style>
